<template>
  <div id="subclass-info-list" class="card col-12 px-0 mt-5">
    <nav aria-label="breadcrumb" role="navigation">
      <ol class="breadcrumb pb-0">
        <li class="breadcrumb-item ms-1" aria-current="page">基础数据</li>
        <li class="breadcrumb-item" aria-current="page">
          <router-link to="/h5/data/subclasses">舱位信息</router-link>
        </li>
        <li class="breadcrumb-item active" aria-current="page">详情</li>

        <span class="ms-auto me-1" @click.stop="back()">返回</span>
      </ol>
    </nav>

    <div class="card-body">
      <dl class="row">
        <dt class="col-4 text-end">航司</dt>
        <dd class="col-8">
          <input type="text" class="form-control" 　v-model.trim="carrier" />
        </dd>
        <dt class="col-4 text-end">舱位</dt>
        <dd class="col-8">
          <input
            type="text"
            class="form-control"
            　v-model.trim="subclass"
            size="3"
          />
        </dd>
        <dt class="col-4 text-end">舱位等级</dt>
        <dd class="col-8">
          <select v-model.number="cabinType" class="form-control">
            <option value="10">头等舱</option>
            <option value="20">商务舱</option>
            <option value="30">经济舱</option>
            <option value="40">超级经济舱</option>
          </select>
        </dd>
        <dt class="col-4 text-end">乘客</dt>
        <dd class="col-8">
          <select v-model.number="psgType" class="form-control">
            <option value="0">成人</option>
            <option value="1">儿童</option>
            <option value="2">婴儿</option>
            <option value="8">伤残军/警</option>
          </select>
        </dd>
        <dt class="col-4 text-end">描述</dt>
        <dd class="col-8">
          <input
            type="text"
            class="form-control"
            v-model="subclassDesc"
            size="5"
          />
        </dd>
        <dt class="col-4 text-end">折扣</dt>
        <dd class="col-8">
          <input
            type="text"
            class="form-control"
            v-model.number="discount"
            size="5"
          />
        </dd>
        <dt class="col-4 text-end">代理费</dt>
        <dd class="col-8">
          <input
            type="text"
            class="form-control"
            v-model.number="commission"
            size="5"
          />
        </dd>
        <dt class="col-4 text-end">OPEN</dt>
        <dd class="col-8">
          <div class="form-check form-check-inline">
            <input
              class="form-check-input"
              type="radio"
              value="0"
              v-model.number="openAllowed"
            />
            <label class="form-check-label text-danger">不允许</label>
          </div>
          <div class="form-check form-check-inline">
            <input
              class="form-check-input"
              type="radio"
              value="1"
              v-model.number="openAllowed"
            />
            <label class="form-check-label">允许</label>
          </div>
        </dd>
        <dt class="col-4 text-end">自愿签转</dt>
        <dd class="col-8">
          <div class="form-check form-check-inline">
            <input
              class="form-check-input"
              type="radio"
              value="0"
              v-model.number="endorsable"
            />
            <label class="form-check-label text-danger">不允许</label>
          </div>
          <div class="form-check form-check-inline">
            <input
              class="form-check-input"
              type="radio"
              value="1"
              v-model.number="endorsable"
            />
            <label class="form-check-label">允许</label>
          </div>
        </dd>
      </dl>
    </div>
    <div class="card-body bg-info text-white py-0 text-center">自 愿 退 票</div>
    <table class="table table-sm">
      <thead>
        <tr class="small">
          <th class="">{{ this.refundLabel1 }}</th>
          <th class="">{{ this.refundLabel2 }}</th>
          <th class="">{{ this.refundLabel3 }}</th>
          <th class="">{{ this.refundLabel4 }}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <input
              type="text"
              class="form-control"
              v-model.number="refundRate1"
              size="5"
            />
          </td>
          <td>
            <input
              type="text"
              class="form-control"
              v-model.number="refundRate2"
              size="5"
            />
          </td>
          <td>
            <input
              type="text"
              class="form-control"
              v-model.number="refundRate3"
              size="5"
            />
          </td>
          <td>
            <input
              type="text"
              class="form-control"
              v-model.number="refundRate4"
              size="5"
            />
          </td>
        </tr>
      </tbody>
    </table>
    <div class="card-body bg-info text-white py-0 text-center">自 愿 变 更</div>
    <table class="table table-striped table-sm">
      <thead>
        <tr class="small">
          <th class="">{{ this.changeLabel1 }}</th>
          <th class="">{{ this.changeLabel2 }}</th>
          <th class="">{{ this.changeLabel3 }}</th>
          <th class="">{{ this.changeLabel4 }}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <input
              type="text"
              class="form-control"
              v-model.number="changeRate1"
              size="5"
            />
          </td>
          <td>
            <input
              type="text"
              class="form-control"
              v-model.number="changeRate2"
              size="5"
            />
          </td>
          <td>
            <input
              type="text"
              class="form-control"
              v-model.number="changeRate3"
              size="5"
            />
          </td>
          <td>
            <input
              type="text"
              class="form-control"
              v-model.number="changeRate4"
              size="5"
            />
          </td>
        </tr>
      </tbody>
    </table>
    <div class="card-footer row" v-if="isDataAdmin">
      <div class="form-check" v-if="id === 0">
        <input
          type="checkbox"
          class="form-check-input"
          v-model="keepInputing"
        />
        <label class="form-check-label">继续录入</label>
      </div>
      <button
        type="button"
        class="btn btn-primary me-auto ms-auto"
        v-on:click="saveSubclass()"
      >
        保存
      </button>
    </div>
    <div>
      备注：成人舱位的折扣数仅供参考；儿童、婴儿、伤残军人/警察舱位的折扣数表示相同成人舱位的价格的百分数。
    </div>
  </div>
</template>

<script>
import $ from "jquery";
import {
  getSubclassInfo,
  searchFlightConditionTimeWindow,
  saveSubclass,
} from "@/api/basic-data.js";

export default {
  data() {
    return {
      id: 0,
      opMode: 0, //0-默认操作，1-复制(id设置为0，其它保留)
      detail: null,
      timeWindows: [],

      refundLabel1: "退票手续费1",
      refundLabel2: "退票手续费2",
      refundLabel3: "退票手续费3",
      refundLabel4: "退票手续费4",
      changeLabel1: "改签手续费1",
      changeLabel2: "改签手续费2",
      changeLabel3: "改签手续费3",
      changeLabel4: "改签手续费4",

      carrier: "",
      subclass: "",
      psgType: 0,
      cabinType: 30,
      subclassDesc: "",
      discount: 100,
      commission: 0,
      openAllowed: 0,
      endorsable: 0,
      refundRate1: 0,
      refundRate2: 0,
      refundRate3: 0,
      refundRate4: 0,
      changeRate1: 0,
      changeRate2: 0,
      changeRate3: 0,
      changeRate4: 0,

      keepInputing: false,
    };
  },
  computed: {
    isDataAdmin() {
      return this.$store.getters.isDataAdmin;
    },
  },
  mounted: function () {
    const id = parseInt(this.$route.query.id);
    const opMode = parseInt(this.$route.query.mode);
    if (!isNaN(opMode)) {
      this.opMode = opMode;
    }

    if (!isNaN(id)) {
      this.id = parseInt(this.$route.query.id);
      this.searchDetail();
    }
  },
  watch: {
    timeWindows() {
      this.changeTimeWindowLabels();
    },
    carrier(newVal, oldVal) {
      // console.log(newVal + ', ' + oldVal + ', ' + this.carrier.length)
      if (this.carrier.length == 2) {
        this.searchFlightConditionTimeWindow();
      }
    },
  },
  methods: {
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    back: function () {
      this.$router.go(-1);
    },
    searchDetail: function () {
      getSubclassInfo(this.id, (v) => {
        this.carrier = v.carrier;
        this.subclass = v.subclass;
        this.psgType = v.psgType;
        this.cabinType = v.cabinType;
        this.subclassDesc = v.subclassDesc;
        this.discount = v.discount;
        this.commission = v.commission;
        this.openAllowed = v.openAllowed;
        this.endorsable = v.endorsable;
        this.refundRate1 = v.refundFeeRate1;
        this.refundRate2 = v.refundFeeRate2;
        this.refundRate3 = v.refundFeeRate3;
        this.refundRate4 = v.refundFeeRate4;
        this.changeRate1 = v.changeFeeRate1;
        this.changeRate2 = v.changeFeeRate2;
        this.changeRate3 = v.changeFeeRate3;
        this.changeRate4 = v.changeFeeRate4;

        this.detail = v;
        if (this.opMode === 1) {
          //复制
          this.id = 0;
          this.detail.id = 0;
        }

        this.searchFlightConditionTimeWindow();
      });
    },
    searchFlightConditionTimeWindow: function () {
      searchFlightConditionTimeWindow(
        {
          carrier: this.carrier,
        },
        (v) => {
          this.timeWindows = v;
        }
      );
    },
    changeTimeWindowLabels: function () {
      for (let t of this.timeWindows) {
        switch (t.windowOrder) {
          case 1:
            this.refundLabel1 = this.showTimeWindowDesc(t);
            this.changeLabel1 = this.showTimeWindowDesc(t);
            break;
          case 2:
            this.refundLabel2 = this.showTimeWindowDesc(t);
            this.changeLabel2 = this.showTimeWindowDesc(t);
            break;
          case 3:
            this.refundLabel3 = this.showTimeWindowDesc(t);
            this.changeLabel3 = this.showTimeWindowDesc(t);
            break;
          case 4:
            this.refundLabel4 = this.showTimeWindowDesc(t);
            this.changeLabel4 = this.showTimeWindowDesc(t);
            break;
        }
      }
    },
    showTimeWindowDesc: function (t) {
      let desc = "＠";
      if (t.maxHours != 0) {
        let desc0 = t.maxHours + "H";
        if (t.maxIncluded == 1) {
          desc0 += " => ";
        } else {
          desc0 += " > ";
        }
        desc = desc0 + desc;
      }

      if (t.minHours != 0) {
        let desc0;
        if (t.minIncluded == 1) {
          desc0 = " >= ";
        } else {
          desc0 = " > ";
        }
        desc0 += t.minHours + "H";
        desc = desc + desc0;
      }

      return desc;
    },
    saveSubclass: function () {
      const params = {
        id: this.id,
        carrier: this.carrier,
        subclass: this.subclass,
        psgType: this.psgType,
        cabinType: this.cabinType,
        subclassDesc: this.subclassDesc,
        discount: this.discount,
        commission: this.commission,
        openAllowed: this.openAllowed,
        endorsable: this.endorsable,
        refundFeeRate1: this.refundRate1,
        refundFeeRate2: this.refundRate2,
        refundFeeRate3: this.refundRate3,
        refundFeeRate4: this.refundRate4,
        changeFeeRate1: this.changeRate1,
        changeFeeRate2: this.changeRate2,
        changeFeeRate3: this.changeRate3,
        changeFeeRate4: this.changeRate4,
      };

      saveSubclass(params, (jsonResult) => {
        if (jsonResult.status === "OK") {
          this.showErrMsg("保存成功");
          if (this.keepInputing === false) {
            this.back();
          }
        } else {
          this.showErrMsg("保存失败：" + jsonResult.errmsg);
        }
      });
    },
  },
};
</script>
